import 'package:flutter/material.dart';
import 'package:read_book/ui/pages/book_info/catalog.dart';
import 'package:read_book/utils/cover_image.dart';

//书籍详情
class BookInfo extends StatefulWidget {
  Map book;

  BookInfo({Key key, this.book}) : super(key: key);

  @override
  BookInfoState createState() => BookInfoState();
}

class BookInfoState extends State<BookInfo> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.keyboard_backspace),
          onPressed: () {
            Navigator.pop(context);
          },
          color: Colors.white,
        ),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.share),
            onPressed: () {
              Navigator.pushNamed(context, '/classify');
            },
            color: Colors.white,
          )
        ],
        backgroundColor: const Color(0xff605167),
      ),
      drawer: Drawer(
        elevation: double.infinity,
        child: Catalog(bookId: widget.book['_id']),
      ),
      body: Builder(
        builder: (BuildContext context) {
          return Container(
            color: const Color(0xffe2e2e2),
            child: ListView(
              children: <Widget>[
                ///小说封面
                Container(
                  height: 15.0,
                  color: const Color(0xff605167),
                  child: buildHeader(context),
                ),

                /// 操作栏
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.only(bottom: 5.0),
                  color: Colors.white,
                  child: buildOpera(context),
                ),

                ///小说简介
                Container(
                  width: double.infinity,
                  color: Colors.white,
                  margin: const EdgeInsets.only(top: 5.0),
                  padding: const EdgeInsets.all(15.0),
                  child: Text(
                    widget.book['longIntro'],
                    softWrap: true,
                    textAlign: TextAlign.left,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 5,
                    style:
                        const TextStyle(fontSize: 14.0, color: Colors.black54),
                  ),
                ),

                ///最新章节
                Container(
                  width: double.infinity,
                  height: 40.0,
                  margin: const EdgeInsets.only(top: 5.0),
                  color: Colors.white,
                  child: buildNew(context),
                ),

                ///最新书评
                Container(
                  width: double.infinity,
                  margin: const EdgeInsets.only(top: 5.0),
                  color: Colors.white,
                  child: buildComment(context),
                )
              ],
            ),
          );
        },
      ),
    );
  }

  ///小说封面、名称
  Widget buildHeader(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          height: 120.0,
          padding: const EdgeInsets.only(left: 15.0),
          child: Image.network(CoverImage.convertImageUrl(widget.book['cover']),
              fit: BoxFit.contain),
        ),
        Expanded(
          child: Container(
            width: double.infinity,
            height: 120.0,
            padding: const EdgeInsets.only(left: 10.0),
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 90.0,
                  child: Column(children: <Widget>[
                    SizedBox(
                      width: double.infinity,
                      child: Text(
                        widget.book['title'],
                        style: const TextStyle(
                            fontSize: 20.0, color: Colors.white),
                        textAlign: TextAlign.left,
                      ),
                    ),
                    SizedBox(
                      width: double.infinity,
                      child: Text(
                        '作者:${widget.book['author']}',
                        style: const TextStyle(
                            fontSize: 16.0, color: Colors.white),
                        textAlign: TextAlign.left,
                      ),
                    ),
                    SizedBox(
                        width: double.infinity,
                        child: Text(
                          '${widget.book['wordCount'] / 10000}万字',
                          style: const TextStyle(
                              fontSize: 14.0, color: Colors.white),
                          textAlign: TextAlign.left,
                        ))
                  ]),
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: Text.rich(TextSpan(
                          text: widget.book['majorCate'],
                          style: const TextStyle(
                              color: Colors.white, fontSize: 14.0),
                          children: <TextSpan>[
                            const TextSpan(text: ' | '),
                            TextSpan(text: widget.book['minorCateV2']),
                          ])),
                    ),
                    Expanded(
                      child: Container(
                        padding: const EdgeInsets.only(left: 30.0),
                        child: Text.rich(TextSpan(
                            text: '${widget.book['rating']['score']}',
                            style: const TextStyle(
                              color: Colors.orangeAccent,
                              fontSize: 20.0,
                            ),
                            children: const <TextSpan>[
                              TextSpan(
                                  text: '分',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 14.0))
                            ])),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        )
      ],
    );
  }

  ///按钮组
  Widget buildOpera(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
            child: GestureDetector(
          onTap: () {
            debugPrint('加书架');
          },
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 30.0,
                child: IconButton(
                  icon: const Icon(Icons.add_to_photos),
                  onPressed: () {
                    debugPrint('add to photo');
                  },
                ),
              ),
              const Text('加书架', style: TextStyle(fontSize: 12.0))
            ],
          ),
        )),
        Expanded(
          child: GestureDetector(
            onTap: () {
              //打开目录
              Scaffold.of(context).openDrawer();
            },
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 30.0,
                  child: IconButton(
                    icon: const Icon(Icons.format_list_bulleted),
                    onPressed: () {
                      debugPrint('菜单');
                    },
                  ),
                ),
                Text(
                  '${widget.book['chapterCount']}章',
                  style: const TextStyle(fontSize: 12.0),
                )
              ],
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () {
              debugPrint('支持作品');
            },
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 30.0,
                  child: IconButton(
                    icon: const Icon(Icons.local_activity),
                    onPressed: () {},
                  ),
                ),
                const Text(
                  '支持作品',
                  style: TextStyle(fontSize: 12.0),
                ),
              ],
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () {
              debugPrint('批量下载');
            },
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 30.0,
                  child: IconButton(
                    icon: const Icon(Icons.file_download),
                    onPressed: () {},
                  ),
                ),
                const Text(
                  '批量下载',
                  style: TextStyle(fontSize: 12.0),
                )
              ],
            ),
          ),
        )
      ],
    );
  }

  ///小说最新章节
  Widget buildNew(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          width: 100.0,
          padding: const EdgeInsets.only(left: 15.0),
          child: const Text('最新章节', style: TextStyle(fontSize: 16.0)),
        ),
        Expanded(
          child: Text(
            '${widget.book['lastChapter']}',
            style: const TextStyle(color: Colors.black54),
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
          ),
        ),
        const Icon(
          Icons.chevron_right,
          color: Colors.black54,
        )
      ],
    );
  }

  ///评论数据
  List comments = [
    {
      'aviator':
          'https://thirdwx.qlogo.cn/mmopen/vi_32/ackwQAFpY1aGKnH1lDJbscq0SK6agT8FCUsQbPhvSklwoTuK9A2R4Zq4reUwfBTbgaU1pXuiaHv3iaeBT27ibibOWQ/132',
      'name': '不吃药',
      'content':
          '那年，葛小天在自家地头搭了个草棚，不料，里面蹿出俩壮汉。……帝国时代啊？可这是现代社会啊！难道要我推着火炮去攻打县城？我石乐志，还是你石乐志？算了，咱们还是一起去搬砖吧，等赚了钱，再包个小工地.'
    },
    {
      'aviator':
          'https://thirdwx.qlogo.cn/mmopen/vi_32/lvnXFUxSt69Ftj6fbeGSe6ib7KicmZEa2lTYJp8GiaC2xBA3W9ybIa4G540gcRMpNNZlpSbhf8AtTosNNcgb8pFgQ/132',
      'name': '绝欢',
      'content': '好久不更新了哦'
    },
    {
      'aviator':
          'https://thirdwx.qlogo.cn/mmopen/vi_32/quT9bDRaAtdibT8EDUcYQxrOWSKDuau4SWMia2yta9M5kbabEBt8dbQxvIRmSkIvFBsCv5AhoDPupwY88eBq4xnw/132',
      'name': '朽木',
      'content': '求更新，不够看！'
    }
  ];

  Widget buildComment(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: 40.0,
          padding: const EdgeInsets.only(left: 15.0),
          decoration: const BoxDecoration(
              border: Border(bottom: BorderSide(color: Colors.black12))),
          child: Row(
            children: <Widget>[
              const Expanded(
                child: Text(
                  '最新书评',
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
              Expanded(
                child: Container(
                  padding: const EdgeInsets.only(right: 15.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Icon(
                        Icons.edit,
                        size: 20.0,
                        color: Colors.green[600],
                      ),
                      Text(
                        '写书评',
                        style:
                            TextStyle(color: Colors.green[600], fontSize: 14.0),
                        textAlign: TextAlign.right,
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
        ListBody(
          children: <Widget>[
            ListView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: comments.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  padding: const EdgeInsets.all(10.0),
                  decoration: const BoxDecoration(
                    border: Border(bottom: BorderSide(color: Colors.black12)),
                  ),
                  child: Row(
                    children: <Widget>[
                      ClipOval(
                        child: Image.network(
                          comments[index]['aviator'],
                          fit: BoxFit.contain,
                          width: 40.0,
                        ),
                      ),
                      Expanded(
                        child: Container(
                          width: double.infinity,
                          padding: const EdgeInsets.only(left: 15.0),
                          child: Column(
                            children: <Widget>[
                              SizedBox(
                                width: double.infinity,
                                child: Text(
                                  comments[index]['name'],
                                  style: const TextStyle(
                                      color: Colors.black87, fontSize: 14.0),
                                  textAlign: TextAlign.left,
                                ),
                              ),
                              SizedBox(
                                width: double.infinity,
                                child: Text(
                                  comments[index]['content'],
                                  softWrap: false,
                                  textAlign: TextAlign.left,
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: const TextStyle(
                                      color: Colors.black54, fontSize: 12.0),
                                ),
                              ),
                              SizedBox(
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: const <Widget>[
                                    Text(
                                      'sss',
                                      style: TextStyle(color: Colors.black54),
                                    ),
                                    Text(
                                      'sss',
                                      style: TextStyle(color: Colors.black54),
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                );
              },
            )
          ],
        ),
        Container(
          height: 40.0,
          padding: const EdgeInsets.only(left: 15.0),
          decoration: const BoxDecoration(
            border: Border(bottom: BorderSide(color: Colors.black12)),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: const <Widget>[
              Text(
                '查看更多',
                style: TextStyle(color: Colors.black54, fontSize: 14.0),
              ),
              Icon(
                Icons.more_vert,
                size: 20.0,
                color: Colors.black54,
              )
            ],
          ),
        )
      ],
    );
  }
}
